<template>
	<view>
		<view class="p-4 flex flex-column grid-gap-4">
			<x-alert v-if="form.examine === 0" type="warning" bg>正在审核中，请耐心等待</x-alert>
			<x-alert v-if="form.message && form.examine === 3" type="danger-light-3">{{ form.message }}</x-alert>
			<view class="p-4 bg-white rounded-4 flex flex-column grid-gap-4">
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg">
					<text class="h9 text-grey">姓名</text>
					<input type="text" class="flex-1 text-right font-weight-600 h9" placeholder="请输入姓名"
						v-model="form.name" :disabled="formDisabled">
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg">
					<text class="h9 text-grey">手机号码</text>
					<input type="tel" class="flex-1 text-right font-weight-600 h9" placeholder="请输入手机号码" maxlength="11"
						v-model="form.mobile" :disabled="formDisabled">
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg" @tap="!formDisabled && $refs.xRegionsRef.show({
						level: 2
					})">
					<text class="h9 text-grey text-nowrap">意向代理城市</text>
					<view class="flex-1 flex flex-x-flex-end">
						<text v-if="form.province_id" class="font-weight-600 h9 text-break-all text-wrap">{{ form.province }} {{ form.city }} {{ form.area }}</text>
						<text class="text-placeholder font-weight-600 h9" v-else> 请选择代理城市 </text>
					</view>
					<uni-icons type="right" color="var(--xl-placeholder)"></uni-icons>
				</view>
				<view class="flex rounded-4 p-4 flex-center grid-gap-2" hover-class="bg">
					<text class="flex-1 h9 text-grey">意向代理等级</text>
					<view class="text-right font-weight-600 h9">
						<template v-if="form.area_id">区域代理</template>
						<template v-else-if="form.city_id">市级代理</template>
						<template v-else-if="form.province_id">省级代理</template>
						<template v-else>总代理</template>
					</view>
				</view>
			</view>

			<view class="flex">
				<template v-if="form.examine == 0">
					<button class="flex-1 btn-dark-light-3 btn-round" disabled>审核中</button>
				</template>
				<template v-if="form.examine === null || form.examine == 3">
					<button class="flex-1 btn-primary btn-round" @click="submit()">提交</button>
				</template>
				<template v-if="form.examine == 1">
					<button class="flex-1 btn-success btn-round">审核成功</button>
				</template>
			</view>
			<text class="h9 text-placeholder">{{ WEBCONFIG.agent_apply_tips }}</text>
		</view>

		<!-- 选择意向城市 -->
		<x-regions ref="xRegionsRef" checkStrictly @selected="selectedRegions" />
	</view>
</template>

<script setup lang="ts">
import { ref, computed,nextTick,onBeforeUnmount } from 'vue';
import { $func, $api, $message } from '@/utils';
import { useMap } from '@/utils/map'
import { onLoad } from '@dcloudio/uni-app';
import { useWebConfigStore, useUserStore, useRefs } from "@/stores";
import { $EventName } from '../../../utils/const/env';
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const UserStore = useUserStore();
const form = ref({
	province_id: "",
	province: '',
	city_id: "",
	city: '',
	area_id: "",
	area: '',
	mobile: "",
	name: "",
	examine: null,
	message: "",
	latitude: "",
	longitude: "",
});
const formDisabled = computed(() => {
	return form.value.examine === 1 || form.value.examine === 0;
});
let map:any;
const getLocation = () => {
	if (!map.isReady()) { return; }
	map.getCurrentPosition().then((result:any) => {
		form.value.latitude = result.position.lat
		form.value.longitude = result.position.lng
	}).catch(() => {
	});
}
const getInfo = () => {
	if (!UserStore.hasLogin()) return;
	$api.Agent.info().then((data:any) => {
		form.value = data;
		getLocation();
	}).catch(() => {
	})
}
const submit = () => {
	map.getCurrentPosition().then((result:any) => {
		form.value.latitude = result.position.lat
		form.value.longitude = result.position.lng
	}).catch(() => {
	});
	$api.Agent.apply(form.value).then((res:any) => {
		$message.success(res.msg);
		getInfo();
	}).catch((err:any) => {
		$message.error(err.msg);
	})
}
const selectedRegions = (value:any) => {
	form.value.province_id = value.province_id;
	form.value.province = value.province;
	form.value.city_id = value.city_id;
	form.value.city = value.city;
	form.value.area_id = value.area_id;
	form.value.area = value.area;
}
const useInitMap = () => {
	map = useMap(() => {
		nextTick(() => {
			getLocation();
		})
	});
}
onLoad((options: any) => {
	useInitMap();
	uni.$once($EventName.WEBCONFIG_READY, useInitMap)
	getInfo();
})
onBeforeUnmount(()=>{
	uni.$off($EventName.WEBCONFIG_READY, useInitMap)
})
</script>
